રિએક્ટ કન્કરન્ટ રેન્ડરિંગ: ફાઈબર આર્કિટેક્ચર અને વર્ક લૂપ વિશ્લેષણ સાથે પર્ફોર્મન્સને અનલોક કરવું

રિએક્ટ, જે ફ્રન્ટ-એન્ડ ડેવલપમેન્ટમાં એક પ્રભુત્વશાળી શક્તિ છે, તે વધુને વધુ જટિલ અને ઇન્ટરેક્ટિવ યુઝર ઇન્ટરફેસની માંગને પહોંચી વળવા માટે સતત વિકસિત થયું છે. આ ઉત્ક્રાંતિમાં સૌથી મહત્વપૂર્ણ પ્રગતિઓ પૈકીની એક છે કન્કરન્ટ રેન્ડરિંગ (Concurrent Rendering), જે રિએક્ટ 16 સાથે રજૂ કરવામાં આવી હતી. આ પેરાડાઈમ શિફ્ટે રિએક્ટ અપડેટ્સ અને કમ્પોનન્ટ્સને કેવી રીતે મેનેજ કરે છે તે મૂળભૂત રીતે બદલી નાખ્યું, જેનાથી પર્ફોર્મન્સમાં નોંધપાત્ર સુધારો થયો અને વધુ રિસ્પોન્સિવ યુઝર એક્સપિરિયન્સ શક્ય બન્યો. આ લેખ કન્કરન્ટ રેન્ડરિંગના મૂળભૂત સિદ્ધાંતો, ફાઈબર આર્કિટેક્ચર અને વર્ક લૂપની ઊંડાણપૂર્વક ચર્ચા કરે છે, અને આ મિકેનિઝમ્સ કેવી રીતે વધુ સરળ અને કાર્યક્ષમ રિએક્ટ એપ્લિકેશન્સમાં ફાળો આપે છે તેની સમજ પૂરી પાડે છે.

કન્કરન્ટ રેન્ડરિંગની જરૂરિયાતને સમજવી

કન્કરન્ટ રેન્ડરિંગ પહેલાં, રિએક્ટ સિંક્રોનસ (synchronous) રીતે કામ કરતું હતું. જ્યારે કોઈ અપડેટ થતું (દા.ત., સ્ટેટમાં ફેરફાર, પ્રોપ અપડેટ), રિએક્ટ સમગ્ર કમ્પોનન્ટ ટ્રીને એક જ, અવિરત ઓપરેશનમાં રેન્ડર કરવાનું શરૂ કરતું. આ સિંક્રોનસ રેન્ડરિંગ પર્ફોર્મન્સમાં અવરોધો પેદા કરી શકતું હતું, ખાસ કરીને જ્યારે મોટા કમ્પોનન્ટ ટ્રી અથવા ગણતરીની દ્રષ્ટિએ ભારે ઓપરેશન્સ સાથે કામ કરવાનું હોય. આ રેન્ડરિંગ સમયગાળા દરમિયાન, બ્રાઉઝર અનુત્તરદાયી (unresponsive) બની જતું, જેના કારણે યુઝરને એક ખરાબ અને નિરાશાજનક અનુભવ થતો. આને ઘણીવાર "મેઇન થ્રેડને બ્લોક કરવું" તરીકે ઓળખવામાં આવે છે.

એક એવી પરિસ્થિતિની કલ્પના કરો જ્યાં યુઝર ટેક્સ્ટ ફિલ્ડમાં ટાઇપ કરી રહ્યો છે. જો ટાઇપ કરેલ ટેક્સ્ટ પ્રદર્શિત કરવા માટે જવાબદાર કમ્પોનન્ટ એક મોટા, જટિલ કમ્પોનન્ટ ટ્રીનો ભાગ હોય, તો દરેક કીસ્ટ્રોક એક રી-રેન્ડર ટ્રિગર કરી શકે છે જે મેઇન થ્રેડને બ્લોક કરે છે. આના પરિણામે નોંધપાત્ર લેગ અને ખરાબ યુઝર એક્સપિરિયન્સ થશે.

કન્કરન્ટ રેન્ડરિંગ આ સમસ્યાનું નિરાકરણ લાવે છે. તે રિએક્ટને રેન્ડરિંગ કાર્યોને નાના, વ્યવસ્થાપિત કરી શકાય તેવા કામના એકમોમાં વિભાજીત કરવાની મંજૂરી આપે છે. આ એકમોને જરૂરિયાત મુજબ પ્રાથમિકતા આપી શકાય છે, અટકાવી શકાય છે અને ફરી શરૂ કરી શકાય છે, જેનાથી રિએક્ટ રેન્ડરિંગ કાર્યોને અન્ય બ્રાઉઝર ઓપરેશન્સ, જેમ કે યુઝર ઇનપુટ અથવા નેટવર્ક વિનંતીઓને હેન્ડલ કરવા સાથે જોડી શકે છે. આ અભિગમ મેઇન થ્રેડને લાંબા સમય સુધી બ્લોક થતા અટકાવે છે, જેના પરિણામે વધુ રિસ્પોન્સિવ અને સરળ યુઝર એક્સપિરિયન્સ મળે છે. તેને રિએક્ટની રેન્ડરિંગ પ્રક્રિયા માટે મલ્ટિટાસ્કિંગ તરીકે વિચારો.

ફાઈબર આર્કિટેક્ચરનો પરિચય

કન્કરન્ટ રેન્ડરિંગના કેન્દ્રમાં ફાઈબર આર્કિટેક્ચર છે. ફાઈબર એ રિએક્ટના આંતરિક રિકન્સિલિએશન અલ્ગોરિધમનું સંપૂર્ણ પુનઃ-અમલીકરણ છે. અગાઉની સિંક્રોનસ રિકન્સિલિએશન પ્રક્રિયાથી વિપરીત, ફાઈબર અપડેટ્સ અને કમ્પોનન્ટ્સના રેન્ડરિંગને મેનેજ કરવા માટે વધુ આધુનિક અને દાણાદાર અભિગમ રજૂ કરે છે.

ફાઈબર શું છે?

ફાઈબરને કલ્પનાત્મક રીતે કમ્પોનન્ટ ઇન્સ્ટન્સના વર્ચ્યુઅલ પ્રતિનિધિત્વ તરીકે સમજી શકાય છે. તમારી રિએક્ટ એપ્લિકેશનમાં દરેક કમ્પોનન્ટ એક અનુરૂપ ફાઈબર નોડ સાથે સંકળાયેલ છે. આ ફાઈબર નોડ્સ એક ટ્રી માળખું બનાવે છે જે કમ્પોનન્ટ ટ્રી જેવું જ હોય છે. દરેક ફાઈબર નોડમાં કમ્પોનન્ટ, તેના પ્રોપ્સ, તેના ચિલ્ડ્રન અને તેની વર્તમાન સ્થિતિ વિશેની માહિતી હોય છે. મહત્વપૂર્ણ રીતે, તે તે કમ્પોનન્ટ માટે જે કામ કરવાની જરૂર છે તેના વિશે પણ માહિતી ધરાવે છે.

ફાઈબર નોડના મુખ્ય ગુણધર્મોમાં શામેલ છે:

• type: કમ્પોનન્ટનો પ્રકાર (દા.ત., div, MyComponent).
• key: કમ્પોનન્ટને સોંપેલ યુનિક કી (કાર્યક્ષમ રિકન્સિલિએશન માટે વપરાય છે).
• props: કમ્પોનન્ટને પસાર કરાયેલ પ્રોપ્સ.
• child: કમ્પોનન્ટના પ્રથમ ચાઈલ્ડનું પ્રતિનિધિત્વ કરતા ફાઈબર નોડ તરફનો પોઈન્ટર.
• sibling: કમ્પોનન્ટના આગલા સિબલિંગનું પ્રતિનિધિત્વ કરતા ફાઈબર નોડ તરફનો પોઈન્ટર.
• return: કમ્પોનન્ટના પેરેન્ટનું પ્રતિનિધિત્વ કરતા ફાઈબર નોડ તરફનો પોઈન્ટર.
• stateNode: વાસ્તવિક કમ્પોનન્ટ ઇન્સ્ટન્સનો સંદર્ભ (દા.ત., હોસ્ટ કમ્પોનન્ટ્સ માટે DOM નોડ, ક્લાસ કમ્પોનન્ટ ઇન્સ્ટન્સ).
• alternate: કમ્પોનન્ટના પાછલા સંસ્કરણનું પ્રતિનિધિત્વ કરતા ફાઈબર નોડ તરફનો પોઈન્ટર.
• effectTag: કમ્પોનન્ટ માટે જરૂરી અપડેટના પ્રકારને સૂચવતો ફ્લેગ (દા.ત., પ્લેસમેન્ટ, અપડેટ, ડિલિશન).

ફાઈબર ટ્રી

ફાઈબર ટ્રી એ એક સતત ડેટા સ્ટ્રક્ચર છે જે એપ્લિકેશનના UI ની વર્તમાન સ્થિતિનું પ્રતિનિધિત્વ કરે છે. જ્યારે કોઈ અપડેટ થાય છે, ત્યારે રિએક્ટ બેકગ્રાઉન્ડમાં એક નવું ફાઈબર ટ્રી બનાવે છે, જે અપડેટ પછી UI ની ઇચ્છિત સ્થિતિનું પ્રતિનિધિત્વ કરે છે. આ નવા ટ્રીને "વર્ક-ઇન-પ્રોગ્રેસ" ટ્રી તરીકે ઓળખવામાં આવે છે. એકવાર વર્ક-ઇન-પ્રોગ્રેસ ટ્રી પૂર્ણ થઈ જાય, રિએક્ટ તેને વર્તમાન ટ્રી સાથે બદલી નાખે છે, જેનાથી ફેરફારો યુઝરને દેખાય છે.

આ ડ્યુઅલ-ટ્રી અભિગમ રિએક્ટને રેન્ડરિંગ અપડેટ્સને નોન-બ્લોકિંગ રીતે કરવા દે છે. વર્તમાન ટ્રી યુઝરને દેખાતું રહે છે જ્યારે વર્ક-ઇન-પ્રોગ્રેસ ટ્રી બેકગ્રાઉન્ડમાં બનાવવામાં આવી રહ્યું હોય છે. આ અપડેટ્સ દરમિયાન UI ને ફ્રીઝ થવાથી અથવા અનુત્તરદાયી બનવાથી અટકાવે છે.

ફાઈબર આર્કિટેક્ચરના ફાયદા

• અટકાવી શકાય તેવું રેન્ડરિંગ (Interruptible Rendering): ફાઈબર રિએક્ટને રેન્ડરિંગ કાર્યોને અટકાવવા અને ફરી શરૂ કરવાની મંજૂરી આપે છે, જેનાથી તે યુઝરની ક્રિયાપ્રતિક્રિયાઓને પ્રાથમિકતા આપી શકે છે અને મેઇન થ્રેડને બ્લોક થતા અટકાવે છે.
• વૃદ્ધિશીલ રેન્ડરિંગ (Incremental Rendering): ફાઈબર રિએક્ટને રેન્ડરિંગ અપડેટ્સને કામના નાના એકમોમાં વિભાજીત કરવાની મંજૂરી આપે છે, જે સમય જતાં વૃદ્ધિશીલ રીતે પ્રક્રિયા કરી શકાય છે.
• પ્રાથમિકતા (Prioritization): ફાઈબર રિએક્ટને વિવિધ પ્રકારના અપડેટ્સને પ્રાથમિકતા આપવાની મંજૂરી આપે છે, જેનાથી ખાતરી થાય છે કે મહત્વપૂર્ણ અપડેટ્સ (દા.ત., યુઝર ઇનપુટ) ઓછા મહત્વના અપડેટ્સ (દા.ત., બેકગ્રાઉન્ડ ડેટા ફેચિંગ) પહેલાં પ્રક્રિયા કરવામાં આવે છે.
• સુધારેલ એરર હેન્ડલિંગ (Improved Error Handling): ફાઈબર રેન્ડરિંગ દરમિયાન એરરને હેન્ડલ કરવાનું સરળ બનાવે છે, કારણ કે જો કોઈ એરર આવે તો તે રિએક્ટને પાછલી સ્થિર સ્થિતિમાં પાછા ફરવાની મંજૂરી આપે છે.

વર્ક લૂપ: ફાઈબર કેવી રીતે કન્કરન્સીને સક્ષમ કરે છે

વર્ક લૂપ એ એન્જિન છે જે કન્કરન્ટ રેન્ડરિંગને ચલાવે છે. તે એક રિકર્સિવ ફંક્શન છે જે ફાઈબર ટ્રીમાંથી પસાર થાય છે, દરેક ફાઈબર નોડ પર કામ કરે છે અને UI ને વૃદ્ધિશીલ રીતે અપડેટ કરે છે. વર્ક લૂપ નીચેના કાર્યો માટે જવાબદાર છે:

• પ્રક્રિયા કરવા માટે આગલો ફાઈબર પસંદ કરવો.
• ફાઈબર પર કામ કરવું (દા.ત., નવી સ્થિતિની ગણતરી કરવી, પ્રોપ્સની તુલના કરવી, કમ્પોનન્ટ રેન્ડર કરવું).
• કામના પરિણામો સાથે ફાઈબર ટ્રીને અપડેટ કરવું.
• વધુ કામ કરવા માટે શેડ્યૂલ કરવું.

વર્ક લૂપના તબક્કાઓ

વર્ક લૂપમાં બે મુખ્ય તબક્કાઓ હોય છે:

1. રેન્ડર ફેઝ (જેને રિકન્સિલિએશન ફેઝ તરીકે પણ ઓળખાય છે): આ તબક્કો વર્ક-ઇન-પ્રોગ્રેસ ફાઈબર ટ્રી બનાવવા માટે જવાબદાર છે. આ તબક્કા દરમિયાન, રિએક્ટ ફાઈબર ટ્રીમાંથી પસાર થાય છે, વર્તમાન ટ્રીની ઇચ્છિત સ્થિતિ સાથે તુલના કરે છે અને નક્કી કરે છે કે કયા ફેરફારો કરવાની જરૂર છે. આ તબક્કો એસિંક્રોનસ અને અટકાવી શકાય તેવો છે. તે નક્કી કરે છે કે DOM માં શું બદલવાની *જરૂર* છે.
2. કમિટ ફેઝ: આ તબક્કો વાસ્તવિક DOM માં ફેરફારો લાગુ કરવા માટે જવાબદાર છે. આ તબક્કા દરમિયાન, રિએક્ટ DOM નોડ્સને અપડેટ કરે છે, નવા નોડ્સ ઉમેરે છે, અને જૂના નોડ્સને દૂર કરે છે. આ તબક્કો સિંક્રોનસ અને ન અટકાવી શકાય તેવો છે. તે *ખરેખર* DOM માં ફેરફાર કરે છે.

વર્ક લૂપ કેવી રીતે કન્કરન્સીને સક્ષમ કરે છે

કન્કરન્ટ રેન્ડરિંગની ચાવી એ હકીકતમાં રહેલી છે કે રેન્ડર ફેઝ એસિંક્રોનસ અને અટકાવી શકાય તેવો છે. આનો અર્થ એ છે કે રિએક્ટ કોઈપણ સમયે રેન્ડર ફેઝને અટકાવી શકે છે જેથી બ્રાઉઝર અન્ય કાર્યો, જેમ કે યુઝર ઇનપુટ અથવા નેટવર્ક વિનંતીઓને હેન્ડલ કરી શકે. જ્યારે બ્રાઉઝર નિષ્ક્રિય હોય, ત્યારે રિએક્ટ રેન્ડર ફેઝને જ્યાંથી છોડ્યું હતું ત્યાંથી ફરી શરૂ કરી શકે છે.

રેન્ડર ફેઝને અટકાવવાની અને ફરી શરૂ કરવાની આ ક્ષમતા રિએક્ટને રેન્ડરિંગ કાર્યોને અન્ય બ્રાઉઝર ઓપરેશન્સ સાથે જોડવાની મંજૂરી આપે છે, જેનાથી મેઇન થ્રેડ બ્લોક થતો અટકે છે અને વધુ રિસ્પોન્સિવ યુઝર એક્સપિરિયન્સ સુનિશ્ચિત થાય છે. બીજી બાજુ, કમિટ ફેઝ UI માં સુસંગતતા સુનિશ્ચિત કરવા માટે સિંક્રોનસ હોવો જોઈએ. જો કે, કમિટ ફેઝ સામાન્ય રીતે રેન્ડર ફેઝ કરતાં ઘણો ઝડપી હોય છે, તેથી તે સામાન્ય રીતે પર્ફોર્મન્સમાં અવરોધો પેદા કરતું નથી.

વર્ક લૂપમાં પ્રાથમિકતા

રિએક્ટ એ નક્કી કરવા માટે પ્રાથમિકતા-આધારિત શેડ્યુલિંગ અલ્ગોરિધમનો ઉપયોગ કરે છે કે કયા ફાઈબર નોડ્સની પ્રથમ પ્રક્રિયા કરવી. આ અલ્ગોરિધમ દરેક અપડેટને તેના મહત્વના આધારે પ્રાથમિકતા સ્તર સોંપે છે. ઉદાહરણ તરીકે, યુઝર ઇનપુટ દ્વારા ટ્રિગર થયેલા અપડેટ્સને સામાન્ય રીતે બેકગ્રાઉન્ડ ડેટા ફેચિંગ દ્વારા ટ્રિગર થયેલા અપડેટ્સ કરતાં ઊંચી પ્રાથમિકતા સોંપવામાં આવે છે.

વર્ક લૂપ હંમેશા સૌથી વધુ પ્રાથમિકતાવાળા ફાઈબર નોડ્સની પ્રથમ પ્રક્રિયા કરે છે. આ સુનિશ્ચિત કરે છે કે મહત્વપૂર્ણ અપડેટ્સ ઝડપથી પ્રક્રિયા થાય છે, જેનાથી રિસ્પોન્સિવ યુઝર એક્સપિરિયન્સ મળે છે. ઓછા મહત્વના અપડેટ્સ જ્યારે બ્રાઉઝર નિષ્ક્રિય હોય ત્યારે બેકગ્રાઉન્ડમાં પ્રક્રિયા કરવામાં આવે છે.

આ પ્રાથમિકતા સિસ્ટમ એક સરળ યુઝર એક્સપિરિયન્સ જાળવવા માટે નિર્ણાયક છે, ખાસ કરીને જટિલ એપ્લિકેશન્સમાં જ્યાં અસંખ્ય સમવર્તી અપડેટ્સ હોય છે. એક એવી પરિસ્થિતિનો વિચાર કરો જ્યાં યુઝર સર્ચ બારમાં ટાઇપ કરી રહ્યો છે જ્યારે સાથે સાથે, એપ્લિકેશન સૂચવેલા સર્ચ ટર્મ્સની સૂચિ મેળવી અને પ્રદર્શિત કરી રહી છે. યુઝરના ટાઇપિંગ સંબંધિત અપડેટ્સને પ્રાથમિકતા આપવી જોઈએ જેથી ટેક્સ્ટ ફિલ્ડ રિસ્પોન્સિવ રહે, જ્યારે સૂચવેલા સર્ચ ટર્મ્સ સંબંધિત અપડેટ્સને બેકગ્રાઉન્ડમાં પ્રક્રિયા કરી શકાય છે.

કન્કરન્ટ રેન્ડરિંગના વ્યવહારુ ઉદાહરણો

ચાલો કેટલાક વ્યવહારુ ઉદાહરણો જોઈએ કે કન્કરન્ટ રેન્ડરિંગ કેવી રીતે રિએક્ટ એપ્લિકેશન્સના પર્ફોર્મન્સ અને યુઝર એક્સપિરિયન્સને સુધારી શકે છે.

૧. યુઝર ઇનપુટને ડિબાઉન્સ કરવું

એક સર્ચ બારનો વિચાર કરો જે યુઝર ટાઇપ કરે તેમ સર્ચ પરિણામો દર્શાવે છે. કન્કરન્ટ રેન્ડરિંગ વિના, દરેક કીસ્ટ્રોક સમગ્ર સર્ચ પરિણામોની સૂચિનું રી-રેન્ડર ટ્રિગર કરી શકે છે, જેનાથી પર્ફોર્મન્સ સમસ્યાઓ અને ખરાબ યુઝર એક્સપિરિયન્સ થઈ શકે છે.

કન્કરન્ટ રેન્ડરિંગ સાથે, આપણે ડિબાઉન્સિંગનો ઉપયોગ કરીને સર્ચ પરિણામોના રેન્ડરિંગને ત્યાં સુધી વિલંબિત કરી શકીએ છીએ જ્યાં સુધી યુઝર થોડા સમય માટે ટાઇપ કરવાનું બંધ ન કરે. આ રિએક્ટને યુઝરના ઇનપુટને પ્રાથમિકતા આપવા દે છે અને UI ને અનુત્તરદાયી બનતા અટકાવે છે.

અહીં એક સરળ ઉદાહરણ છે:

import React, { useState, useCallback } from 'react';

function SearchBar() {
 const [searchTerm, setSearchTerm] = useState('');

 const debouncedSearch = useCallback(
 debounce((value) => {
 // અહીં સર્ચ લોજિક લખો
 console.log('Searching for:', value);
 }, 300),
 []
 );

 const handleChange = (event) => {
 const value = event.target.value;
 setSearchTerm(value);
 debouncedSearch(value);
 };

 return (
 
 );
}

// ડિબાઉન્સ ફંક્શન
function debounce(func, delay) {
 let timeout;
 return function(...args) {
 const context = this;
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(context, args), delay);
 };
}

export default SearchBar;

આ ઉદાહરણમાં, debounce ફંક્શન સર્ચ લોજિકના અમલીકરણને ત્યાં સુધી વિલંબિત કરે છે જ્યાં સુધી યુઝર ૩૦૦ મિલિસેકન્ડ માટે ટાઇપ કરવાનું બંધ ન કરે. આ સુનિશ્ચિત કરે છે કે સર્ચ પરિણામો ફક્ત ત્યારે જ રેન્ડર થાય છે જ્યારે જરૂરી હોય, જેનાથી એપ્લિકેશનનું પર્ફોર્મન્સ સુધરે છે.

૨. ઈમેજીસનું લેઝી લોડિંગ

મોટી ઈમેજીસ લોડ કરવાથી વેબ પેજના પ્રારંભિક લોડ ટાઇમ પર નોંધપાત્ર અસર પડી શકે છે. કન્કરન્ટ રેન્ડરિંગ સાથે, આપણે લેઝી લોડિંગનો ઉપયોગ કરીને ઈમેજીસના લોડિંગને ત્યાં સુધી મુલતવી રાખી શકીએ છીએ જ્યાં સુધી તે વ્યૂપોર્ટમાં દેખાય નહીં.

આ ટેકનિક એપ્લિકેશનના અનુભવાયેલા પર્ફોર્મન્સમાં નોંધપાત્ર સુધારો કરી શકે છે, કારણ કે યુઝરને પેજ સાથે ક્રિયાપ્રતિક્રિયા શરૂ કરતા પહેલા બધી ઈમેજીસ લોડ થવાની રાહ જોવી પડતી નથી.

અહીં react-lazyload લાઇબ્રેરીનો ઉપયોગ કરીને એક સરળ ઉદાહરણ છે:

import React from 'react';
import LazyLoad from 'react-lazyload';

function ImageComponent({ src, alt }) {
 return (
 લોડ થઈ રહ્યું છે...
}>
 
 
 );
}

export default ImageComponent;

આ ઉદાહરણમાં, LazyLoad કમ્પોનન્ટ ઈમેજના લોડિંગને ત્યાં સુધી વિલંબિત કરે છે જ્યાં સુધી તે વ્યૂપોર્ટમાં દેખાય નહીં. placeholder પ્રોપ આપણને ઈમેજ લોડ થતી હોય ત્યારે લોડિંગ ઇન્ડિકેટર પ્રદર્શિત કરવાની મંજૂરી આપે છે.

૩. ડેટા ફેચિંગ માટે સસ્પેન્સ

રિએક્ટ સસ્પેન્સ તમને ડેટા લોડ થવાની રાહ જોતી વખતે કમ્પોનન્ટના રેન્ડરિંગને "સસ્પેન્ડ" કરવાની મંજૂરી આપે છે. આ ખાસ કરીને ડેટા ફેચિંગના દૃશ્યો માટે ઉપયોગી છે, જ્યાં તમે API માંથી ડેટાની રાહ જોતી વખતે લોડિંગ ઇન્ડિકેટર પ્રદર્શિત કરવા માંગો છો.

સસ્પેન્સ કન્કરન્ટ રેન્ડરિંગ સાથે સરળતાથી સંકલિત થાય છે, જેનાથી રિએક્ટ ડેટાના લોડિંગને પ્રાથમિકતા આપી શકે છે અને UI ને અનુત્તરદાયી બનતા અટકાવે છે.

અહીં એક સરળ ઉદાહરણ છે:

import React, { Suspense } from 'react';

// એક નકલી ડેટા મેળવવાનું ફંક્શન જે પ્રોમિસ રિટર્ન કરે છે
const fetchData = () => {
 return new Promise(resolve => {
 setTimeout(() => {
 resolve({ data: 'Data loaded!' });
 }, 2000);
 });
};

// એક રિએક્ટ કમ્પોનન્ટ જે સસ્પેન્સનો ઉપયોગ કરે છે
function MyComponent() {
 const resource = fetchData();
 return (
 લોડ થઈ રહ્યું છે...